iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 10
0
Modern Web

網站前端後端與API系列 第 10

前端的主力-HTML, JavaScript與CSS-1

  • 分享至 

  • xImage
  •  

JavasSript到底是前端語言還是後端語言?

JavaScrips(JS)怎麼一直提到,不是說NodeJS是用JavaScript寫的,前後端框架套件ExpressJS不也都是JS寫的嗎?怎麼現在又變成前端語言了呢?

時間回到NodeJS出現之前

在NodeJS出現之前,JS是一套前端語言,主要的功用是撰寫HTML或網頁所需要的功能或介面,介面通常是互動部分,當然也可以寫出排版、視覺等效果。編譯JS的主流平台是瀏覽器,所以當時學習JS的緣由就是希望能讓網頁前端有更好的功能體驗。

NodeJS出現之後

NodeJS出現之後,JS可以由NodeJS進行編譯,而NodeJS以JS為主要語言撰寫(但NodeJS本身以C++為底建構的),可以建構後端部分,也就是說,前後端都能夠由JS撰寫而成,NodeJS剛出現的時候,在網路界是個很突破的概念,學習JS的人數也開始迅速暴漲。而前後端是個概念,基本上後端部分的伺服器、資料庫都能夠由JS建構。

程式語言發展一向如此,越來越多人投入的語言,就有越多學習資源公開(程式界為世界一片淨土,人人不藏私),也就是為什麼現今的NPM這麼多的資源可以使用,讓我們都可以站在巨人的肩膀上往前走。

認識JS後,我們討論前端的主要架構-HTML

HTML

對任何網頁按下右鍵->檢視原始碼,會看到的語言八九不離十就是HTML。HTML為前端網頁主要建構的語言,一個網頁的架構仰賴HTML的元件組合而成,HTML主要由文件物件模型(Document Object Model, DOM)用<DOM元素>表示DOM元素開始,</DOM元素>表示DOM元素表示結束。
舉例來說,仔細看所有網頁幾乎都是像index.ejs內的起始與結束:

<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
  </head>
  <body>
    <h1><%= title %></h1>
    <p>Welcome to <%= title %></p>
  </body>
</html>

第一行的用意是宣告以下使用HTML語言執行。
第二行與最後一行,能夠看到<html></html>包覆全部的內容,這就是一個DOM物件。
第三行與第六行,能夠看到<head></head>也是一個DOM物件,這個DOM物件在 之內,我們發現,縮排(最前面空格或tab)代表了DOM物件的階層,這是一個重要的概念,了解了也比較能讀懂HTML語言的規則。
<html></html>內主要就是由<head></head>與</body組成,習慣上放屬性、環境相關的內容,例如,網頁標題、網頁屬性資料、備註資料、引用資料.....等等都會放在head裡面。
以上面index.ejs為例

<title><%= title %></title>
<link rel='stylesheet' href='/stylesheets/style.css' />

兩行分別就是設定網頁標題與引用style.css文件,引用的文件在這份HTML內都可以操作使用。
而主要放置網站主要內容,例如架構、文字、按鈕.....等,內容部分不包含排版與大多互動功能,做出漂亮的版面與樣式,習慣上使用CSS撰寫,而功能方面實踐方面使用JS撰寫。今天我們認識了JS與HTML接下來,我們會介紹應用實例。


上一篇
ExpressJS專案中的前端概念-3
下一篇
前端的主力-HTML, JavaScript與CSS-2
系列文
網站前端後端與API30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言